<style type="text/css">
        span{display: inline-block;}/*将span设置为块级对象 */
        /* 设置两个span的高度宽度和顶部半圆 */
        .heart_left, .heart_right{
            width: 50px; height: 80px; background-color: red;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
        }
        .heart_left{transform: rotateZ(-45deg);}/* 左边的span以Z轴旋转-45度 */
        .heart_right{transform: translateX(-28px) rotateZ(45deg);}/* 右边的span以X轴移动-28px以Z轴旋转45度 */
        .heart{margin: 20px 20px;animation: beat 1.5s infinite;}/* infinite 无限执行动画 */
        /* 设置帧动画 */
        @keyframes beat{
            30%{transform: scale(1.3);}/* 到30%节点放大1.3倍 */
            100%{transform: scale(1);}/* 到最后还原 */
        }
  </style>
  <div>
      <!-- 创建一个主span用来启动动画，两个span标签用来制作心形 -->
      <span class="heart">
            <span class="heart_left"></span><span class="heart_right"></span>
      </span>
  </div>